/***
Using the config-file you can customize stuff like padding, margin, shadows etc for all the components.

Check the SASS file for all available config.
***/
// Padding and bg around all content (this gets assigned to the [data-role="wrapper"] element)
$wrapper-padding: 16px;
$wrapper-bg: #fafafa;

// Font sizes (you are encouraged to use (and modify) these for your own styling)
$default-size: 14px;
$small-size: 11px;
$large-size: 16px;
$heading-size: 24px;

// Paddings (border-radius is doubled for buttons)
$padding-top-bottom: 8px;
$padding-left-right: 16px;
$border-radius: 8px;

// Separator distance for most components
$margin-bottom: 16px;

// Shadows
$shadow-color-dark: rgba(0, 0, 0, .6);
$shadow-color-light: rgba(250, 250, 250, .6);
$default-shadow: 1px 1px 2px $shadow-color-dark;

// Transitions
$transition-duration: .2s;

// Icons
$icon-bg-size: 26px;
$icon-size: 16px;
$icon-bg-color: rgba(50, 50, 50, .6);
